<template>
    <div>
        <button @click="getBugs">获取bug列表信息</button>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Bugs',
    methods: {
        getUser() {
            axios.get('/abc/vue/user').then(
                response => {
                    console.log('服务器响应回来的数据', response.data)
                },
                error => {
                    console.log('错误信息', error.message)
                }
            )
        },
        getBugs() {
            // console.log(666)
            // 发送ajax请求，访问 http://localhost:8000/vue/bugs
            // 使用axios库发送ajax请求（安装：npm i axios）
            // 注意：！！！！此处会跨域
            // axios.get('http://localhost:8000/vue/bugs').then(
            //     response => {
            //         console.log('服务器响应回来的数据', response.data)
            //     },
            //     error => {
            //         console.log('错误信息', error.message)
            //     }
            // )

            // 使用vue的代理
            // 原理：发送ajax请求的时候，会优先从自己的服务器当中找 /vue/bugs 资源；
            // 如果找不到，就会找代理，然后去 http://localhost:8000 找 /vue/bugs 资源.
            // http://localhost:8080/vue/bugs 可以省略为 /vue/bugs，因为：
            //    - 当前按钮在这个页面就是在8080服务器上，又去访问8080服务器上的资源，所以 http://localhost:8080 可以省略
            // axios.get('http://localhost:8080/vue/bugs').then(
            //     response => {
            //         console.log('服务器响应回来的数据', response.data)
            //     },
            //     error => {
            //         console.log('错误信息', error.message)
            //     }
            // )

            axios.get('api/vue/bugs').then(
                response => {
                    console.log('服务器响应回来的数据', response.data)
                },
                error => {
                    console.log('错误信息', error.message)
                }
            )
        }
    }
}
</script>